<template>
	<view>
		<view v-for="item of catalogTree" class="catalog-item" :class="{
			 folder:item.children.length>0,
			 active:activeCatalogId==item.id,
			 hasPadding:paddingMode=='all'||paddingMode=='parent'
			}">
			<view class="title-container" @click="chooseCatalog(item)">
				<image v-show="item.children.length>0" class="project-icon" mode="aspectFit"
					src="/static/catalog/project.png">
				</image>
				<view class="title">{{item.name}}</view>
				<image v-show="unfoldCatalogList.indexOf(item.id)>-1" class="navback-icon" mode="aspectFit"
					src="/static/catalog/navback.png">
				</image>
			</view>
			<view v-if="unfoldCatalogList.indexOf(item.id)>-1" class="children-container">
				<CatalogTree :catalogTree="item.children" :activeCatalogId="activeCatalogId"
					:hasPadding="(paddingMode=='parent'||paddingMode=='none')?'none':'all'"
					@chooseCatalog="chooseCatalog"></CatalogTree>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "CatalogTree",
		props: {
			catalogTree: {
				type: Array,
				default: () => []
			},
			activeCatalogId: {
				type: [String, Number],
				default: 0
			},
			paddingMode: {
				type: String,
				default: "all" //all都有 parent只有第一级有 child只有下级有 none都没有
			},
		},
		data() {
			return {
				unfoldCatalogList: []
			}
		},
		mounted() {},
		methods: {
			chooseCatalog(item) {

				if (item.children.length > 0) { //列表
					let id_index = this.unfoldCatalogList.findIndex(id => id == item.id);
					if (id_index > -1) { //已展开则关闭
						this.unfoldCatalogList.splice(id_index, 1);
					} else {
						this.unfoldCatalogList.push(item.id);
					}
				}
				//最终子节点则选中并逐级向上传递，最终提交到页面
				else {
					this.$emit("chooseCatalog", item);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.catalog-item {
		font-size: 1.4vw;
		position: relative;
		width: 100%;
		box-sizing: border-box;

		&.hasPadding {
			padding-left: 1.5vw;
		}

		&.folder {
			&>.title-container {
				.project-icon {
					width: 1.5vw;
					height: 1.5vw;
					flex-shrink: 0;
				}

				.title {
					margin-left: 0.5vw;
				}
			}
		}

		&.active {
			background-color: #fff;
			border-left: 0.5vw solid #2380E9;
			padding-left: 1vw;
		}

		.title-container {
			height: 3vw;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding-right: 1.5vw;

			.title {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				line-height: 3vw;
			}

			.navback-icon {
				width: 1.2vw;
				height: 0.6vw;
				margin-left: auto;
				padding-left: 0.5vw;
				flex-shrink: 0;
			}

		}




	}
</style>